<template>
  <div :class="['message', isSent ? 'sent' : 'received']">
    <div class="message-content">{{ message.content }}</div>
    <div class="message-time">{{ formatTime(message.createdAt) }}</div>
  </div>
</template>

<script setup>
defineProps({
  message: {
    type: Object,
    required: true
  },
  isSent: {
    type: Boolean,
    default: false
  }
});

// 格式化时间
const formatTime = (timestamp) => {
  if (!timestamp) return '';
  
  const date = new Date(timestamp);
  return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
};
</script>

<style scoped>
.message {
  margin-bottom: 15px;
  max-width: 70%;
}

.message.sent {
  margin-left: auto;
}

.message.received {
  margin-right: auto;
}

.message-content {
  padding: 10px 15px;
  border-radius: 18px;
  word-break: break-word;
}

.sent .message-content {
  background-color: #1976d2;
  color: white;
  border-top-right-radius: 4px;
}

.received .message-content {
  background-color: #e0e0e0;
  color: #333;
  border-top-left-radius: 4px;
}

.message-time {
  font-size: 12px;
  color: #888;
  margin-top: 5px;
  text-align: right;
}
</style>